<template>
    <div>
        <s-search :value="$route.query.keyword" @input="code = ''" :placeholder="shopId ? '店铺内搜索' : '请输入关键字搜索'" @search="search"></s-search>
         <!-- 商品推荐列表 -->
        <div class="shopList" style="margin-top: 10px;">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onShopLoad"
            >
                <van-row :gutter="10" >
                    <van-col span="12" v-for="goods in shopList" :key="goods.index">
                        <shop-card 
                        :goodsName="goods.title" 
                        :shopNameSub="goods.simpleTitle"
                        :shopImg="'/images' +  goods.titleImage"
                        :memberPrice="goods.currentPrice"
                        :goodsId="goods.goodsId"
                        :showSoldNum="goods.showSoldNum"
                        :price="goods.oringinalPrice"
                        ></shop-card>
                    </van-col>
                </van-row>
            </van-list>
        </div>
    </div>
</template>

<script>

 
import SSearch from './../../components//SSearch';
import shopCard from './../../components/shopCard';
export default {
    name: 'goodsList',
    data() {
        return {
            code: '', //分类code
            shopId: '',//店铺ID
            keyword: '',//关键字

            pageNum: 0,
            total: -1,
            loading: false, //是否正在加载
            finished: false, //是否加载完了
            shopList: [],
            
        }
    }, 

    methods: {
        search(val) {
            this.keyword = val;
            this.pageNum = 1;
            this.shopList = [];
            this.getGoods();
        },
        onShopLoad() {
            if (this.pageNum >= this.total && this.total !== -1) {
                this.finished = true;
                return;
            }
            this.pageNum++;
            this.getGoods();
        },
       

        getGoods() {
            this.loading = true;
            this.$http.post('/shop/goods/front/selectList', {
                code: this.code,
                shopId: this.shopId,
                keyword: this.keyword,
                groupId: this.groupid,
                pageNum: this.pageNum,
                pageSize: 15 
            }).then(res => {
                console.log('获取搜索产品列表数据成功')
                console.log(res)
                this.loading = false;
                this.total = res.data.total;
                this.shopList = this.shopList.concat(res.data.rows);
                if (this.pageNum >= this.total && this.total !== -1) {
                    this.finished = true;
                    return;
                }
            })
        }
    },

    mounted() {
        let { code, shopid, keyword, groupid } = this.$route.query;
        if (code) {
            this.code = code;
        }
        if (shopid) {
            this.shopId = shopid;
        }
        
        if (keyword) {
            this.keyword = keyword;
        }

        if (groupid) {
            this.groupid = groupid;
        }

    },

    components: { shopCard, SSearch }
}
</script>

<style scoped lang="less">
.shopList {
    padding: 0 8px;
}
</style>
